{% extends "base.html" %}
{% block title %}DashBoard{% endblock %}
{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/static/css/jquery-ui.min.css">
    <link rel="stylesheet" href="/static/css/lobipanel.min.css">
    <style>
        .bootstrap-select .dropdown-toggle {
            width: 85%;
        }
    </style>
{% endblock %}
{% block page_content %}
    <div class="alert" role="alert" id="msgAlert">

    </div>
    <div class="well row">
        <div class="row">
            <h3 class="text-center">{{ name }}</h3>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="dashboardCanvas" style="margin-top:65px;">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
    <script src="/static/js/jquery-ui.min.js"></script>
    <script src="/static/js/lobipanel.min.js"></script>
    <script>
        $(function () {

            function refreshDashboard(id, charts) {
                console.log(charts)
                $.each(charts, function (index, obj) {
                    $("#dashboardCanvas").append('<div class="panel panel-default" chart-id="' + obj.id + '" style="width:' + obj.width + 'px;height:' + obj.height + 'px;float:left;margin:5px;"><div class="panel-heading"> </div><div class="panel-body" style="width:' + obj.width + 'px;height:' + obj.height + 'px;">Loading...</div></div>');
                    $(".panel-heading").hide();
                    var chart;

                    $('.panel').on('init.lobiPanel', function (ev, lobiPanel) {
                        var panel = $(this);
                        $.ajax({
                            type: "get",
                            url: '/share/chart/' + obj.id,
                            success: function (data) {
                                panel.children().eq(1).empty();
                                var canvas = "<div  style='margin-top:20px;width:100%;background-color: white;height:100%'></div>";
                                panel.children().eq(1).html(canvas);
                                chart = echarts.init(panel.children().eq(1).children().eq(0)[0], null, {renderer: 'canvas'});
                                var chart_options = $.parseJSON(data.options);
                                chart.setOption(chart_options);
                            }
                        });
                    });
                    $('.panel').lobiPanel({
                        reload: false,
                        editTitle: false,
                        sortable: true,
                        width: 300,
                        height: 300
                    });
                    $(".panel").mouseover(function (event) {
                        $(this).find("div").first().show();
                    });
                    $(".panel").mouseout(function (event) {
                        $(this).find("div").first().hide();
                    });
                    $('.lobipanel').on('beforePin.lobiPanel', function (ev, lobiPanel) {
                        panelWidth = lobiPanel.getWidth();
                        panelHeight = lobiPanel.getHeight();
                    });
                    $('.lobipanel').on('onPin.lobiPanel', function (ev, lobiPanel) {
                        $(this).width(panelWidth);
                        $(this).height(panelHeight);
                        $(this).css("float", "left");
                        $(this).css("margin", "5px");
                    });
                    $('.lobipanel').on('onSmallSize.lobiPanel', function (ev, lobiPanel) {
                        chart.resize();
                    });
                    $('.lobipanel').on('onFullScreen.lobiPanel', function (ev, lobiPanel) {
                        chart.resize();
                    });
                    $('.lobipanel').on('onResize.lobiPanel', function (ev, lobiPanel) {
                        chart.resize();
                    });
                });
            }

            var id = {{ id|safe }};
            var charts = {{ charts|tojson }};
            console.log(id)
            refreshDashboard(id, charts);
        })


    </script>
    <script src="https://pyecharts.github.io/assets/js/echarts.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/china.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-liquidfill.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-wordcloud.min.js"></script>
{% endblock %}